<!--
 * @Author: ly
 * @Date: 2021-11-01 18:43:52
 * @LastEditors: ly
 * @LastEditTime: 2021-11-04 14:21:08
 * @Description: 顾客管理详情页面
-->

<template>
<div>
    <div class='userface'>
        <!-- 头像部分 -->
        <div class='photo' style='text-align:center;height:60px;' >
            <el-col :span="12">
                <div class="demo-basic--circle">
                    <div class="block">
                        <el-avatar :size="70" :src="circleUrl">
                        </el-avatar>
                    </div>
                </div>
            </el-col>
            <el-button type="text" @click="toChangeuserface" style="float: right;margin-top:50px;">修改头像</el-button> 
        </div>
    </div>
    <!-- 头像部分结束 -->
    <div>
        <el-divider></el-divider>
    </div>
    <!-- 信息栏开始 -->
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="登陆用户" v-model="form.username">
                <label>{{form.username}}</label>
            </el-form-item>
            <el-form-item label="用户姓名" v-model="form.realname">
                <label>{{form.realname}}</label>
            </el-form-item>
            <el-form-item label="用户手机" v-model="form.telephone">
                <label>{{form.telephone}}</label>
            </el-form-item>
            <el-form-item label="用户性别" v-model="form.gender">
                <label>{{form.gender}}</label>
            </el-form-item>
            <el-form-item label="用户角色" v-model="form.rolesname">
                <label>顾客</label>
            </el-form-item>
            <el-form-item label="用户生日" v-model="form.birth">
                 <template slot-scope="scope">
                <label v-if="scope.birth=='null' ">暂无</label>
                <label v-else>{{format(form.birth)}}</label>
                 </template>
            </el-form-item>
            <el-form-item label="注册时间" v-model="form.registerTime">
                <label>{{format(form.registerTime)}}</label>
            </el-form-item>
            <el-form-item label="邮箱" v-model="form.email">
                <template slot-scope="scope">
                    <label v-if="scope.email=='null' ">暂无</label>
                    <label v-else>{{form.email}}</label>
                </template>
            </el-form-item>
            <el-form-item label="用户状态" v-model="form.status">
                <el-tag type="success">{{form.status}}</el-tag>
            </el-form-item>
            <!-- 修改个人信息 -->
            <el-button style="float: right;" type="text" @click="toChangeinfo">修改个人信息</el-button>
        </el-form>
    </div>
    <!-- 信息栏结束 -->
    <!-- 修改头像模态框开始 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form :model="form" :rules="rules" ref="From">
            <el-form-item label="头像" :label-width="formLabelWidth" prop="icon">
                <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="form.icon" class="avatar" style='height:100px' />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="toSaveuserface">确定修改</el-button>
        </div>
    </el-dialog>
    <!-- 修改头像模态框结束 -->
    <!-- 修改个人信息模态框开始 -->
    <el-dialog :title="title" :visible.sync="visibleinfo" @close="toCloseInfo">
        <el-form :model="form" :rules='rules' ref='infoForm'>
            <el-form-item label="登录用户" :label-width="formLabelWidth" :disable="true">
                <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
                <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop='gender'>
                <el-radio-group v-model="form.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户手机" :label-width="formLabelWidth" >
                <el-input v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" :label-width="formLabelWidth" >
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-date-picker placeholder="选择出生日期" v-model="form.birth" style="width: 100%;">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visibleinfo = false">取消</el-button>
            <el-button type="primary" @click="toSaveInfo">确定修改</el-button>
        </div>
    </el-dialog>
    <!-- 修改个人信息模态框结束-->
</div>
</template>

<script>
import {
    parseTime
} from '@/utils/index'
import {
    findUserDetailsById,
    alterUserface,
    saveOrUpdate
} from '@/api/customer'
import {
    showFileURL,
    uploadFileURL
} from "@/utils/config";
export default {
    data() {
        return {
            //校验表单
            rules: {
                realname: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },

                ],
                gender: [{
                    required: true,
                    message: '请输入性别',
                    trigger: 'blur',
                }, ],
            },
            // 获取路由携带的参数id
            id: 0,
            circleUrl: '',
            dialogTableVisible: false,
            // 表格绑定得数据
            tableData: [],
            // 双向数据绑定得表单
            form: {},
            // 控制表单控件宽度
            formLabelWidth: "80px",
            //控制模态框显示与隐藏
            visible: false,
            visibleinfo: false,
            // 模态框title变量
            title: '',
            showFileURL,
            uploadFileURL,
            imageUrl: '',
        }
    },
    methods: {
        // 图片上传成功回调
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res);
            this.form.icon = showFileURL + res.data.id;
        },
        // 图片上传之前回调
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        // 重置表单校验
        toClose() {
            this.$refs["From"].resetFields();
            for (let key in this.form) {
                this.form[key] = '';
            }
            this.imageUrl = '';
            this.visible = false;
        },
        toCloseInfo() {
            this.$refs["infoForm"].resetFields();
            for (let key in this.form) {
                this.form[key] = '';
            }
            this.imageUrl = '';
            this.visibleinfo = false;
        },
        //修改个人信息模态框
        toChangeinfo() {
            this.visibleinfo = true;
            this.title = '修改用户信息';
        },
        // 提交修改后的个人信息模块
       toSaveInfo(infoName) {
            this.$refs["infoForm"].validate(async valid => {
                // 当校验通过时，发送请求
                if (valid) {
                    // 异步请求
                    let res = await saveOrUpdate(this.form);
                    this.visibleinfo = false;
                    console.log(res);
                    // 成功提示
                    this.$message({
                        message: res.message,
                        type: "success"
                    });
                    this.findUserById(this.id);
                    // 当校验不通过时
                } else {
                    return false;
                }
            });
        },
        //修改用户头像
        toChangeuserface() {
            this.visible = true;
            this.title = '修改用户头像';
        },
        // 保存头像，修改头像
        toSaveuserface() {
            this.$refs["From"].validate(async valid => {
                if (valid) {
                    // alert('submit!');
                    let res = await alterUserface(this.form);
                    this.$notify.success({
                        title: "保存成功",
                        message: res.message,
                        type: "success"
                    });
                    this.toClose();
                    this.imageUrl = "";
                    this.queryPage();
                    // this.visible=false;
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        // 转换时间戳
        format(time) {
            return parseTime(time);
        },

        // 根据id查询员工详情页
        async findUserById(id) {
            let res = await findUserDetailsById({
                id
            });
            console.log(res);
            this.circleUrl = res.data.userFace;
            this.form = res.data;
        },
    },
    watch: {
        params: {
            handler() {
                this.findUserById();
            },
            deep: true
        }
    },
    created() {
        console.log(this.$route.query.id);
        this.id = this.$route.query.id;
        this.findUserById(this.id);

    }
}
</script>

<style lang="scss" >

</style>

